<template>
    <div class="message-list">
        <!--循环体大包围-->
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoadMsgList">
            <div class="messageList_container">
                <!--循环体-->
                <div class="messageList_cycle" @click="eventClickMsgDetails(item.id)" v-for="(item, index) in msgList"
                     :key="index">
                    <!--通知上部-->
                    <div class="messageList_cycle_top">
                        <!--                    <span v-if="item.isread == 0" style="-->
                        <!--                    display: inline-block;-->
                        <!--                    width: .5rem;-->
                        <!--                    height: .5rem;-->
                        <!--                    border-radius: 50%;-->
                        <!--                    background-color: red;-->
                        <!--                    margin-right: .5rem;"></span>-->
                        <span>{{item.title}}</span>
                    </div>
                    <!--通知下部-->
                    <div class="messageList_cycle_down">
                        <span>点击查看内容</span>
                        <span>{{item.time}}</span>
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
    import {List} from 'vant';

    export default {
        name: "message-list",
        components: {
            [List.name]: List
        },
        data() {
            return {
                page: 0,
                list_rows: 10,
                loading: false,
                finished: false,
                msgList: [],
            }
        },
        methods: {
            onLoadMsgList() {
                this.loading = true;
                var that = this;
                var url = '/api/home/message/typenotice';
                var param = {
                    page: this.page,
                    list_rows: this.list_rows,
                    token: this.$store.state.options.user.token
                };
                this.$util.postRequestInterface(url, param, (res) => {
                    that.page = that.page + 1;

                    if (Array.isArray(res.data.data)) {
                        for (let i of res.data.data) {
                            that.msgList.push({
                                id: i.id,
                                title: i.title,
                                info: i.info,
                                time: that.$moment(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
                                isread: i.isread
                            });
                        }
                    }
                    // // 数据全部加载完成
                    if (that.list_rows > res.data.data.length) {
                        that.finished = true;
                    }
                    // // 加载状态结束
                    that.loading = false;


                    if (this.msgList.length == 0) {
                        this.$store.commit('options/setElementValue', [
                            {
                                key: 'notice.show', value: false
                            }
                        ]);
                    }
                })
            },
            eventClickMsgDetails(id) {
                this.$router.push({
                    path: '/public/message-detail',
                    query: {
                        id: id
                    }
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .message-list {
        /*循环体大包围*/
        .messageList_container {
            width: 100%;
            /*循环体*/
            .messageList_cycle {
                width: 90%;
                margin: 0 auto;
                padding: 0.4rem 0;
                /*消息列表上部*/
                .messageList_cycle_top {
                    width: 100%;
                    height: 3rem;
                    display: flex;
                    align-items: center;

                    span {
                        &:nth-child(1) {
                            /*display: inline-block;*/
                            /*width: .5rem;*/
                            /*height: .5rem;*/
                            /*border-radius: 50%;*/
                            /*background-color: red;*/
                            /*margin-right: .5rem;*/
                        }
                    }
                }

                /*消息列表下部*/
                .messageList_cycle_down {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid #eeeeee;
                    padding-bottom: 1rem;

                    span {
                        &:nth-child(1) {
                            font-size: 1.3rem;
                            color: #999999;
                        }

                        &:nth-child(2) {
                            font-size: 1.3rem;
                            color: #666666;
                            font-weight: 500;
                        }
                    }
                }
            }
        }
    }
</style>
